<template>
  <view class="home">
    <view style="display: flex;align-items: center;justify-content: space-between;width: 702rpx;margin: 0 auto;">
      <view class="top_location">
        <view>
          <u-icon name="map" color="#5e5e5e" size="45"></u-icon>
        </view>
        <view style="margin-left: 7rpx;" class="location_title">{{ location }}</view>
      </view>
      <view style="display: flex;" @click="change_city">
        <view class="location_title">切换城市</view>
        <image src="@/static/change_city.png" class="location_img"></image>
      </view>
    </view>
    <view class="swiper" @click="handApplica">
      <image class="bg" src="@/static/home_img.png" mode="">
      </image>
      <!-- <image class="lingqu"
				src="https://lvpaiqiche.oss-cn-hangzhou.aliyuncs.com/image/20230601/20230601101432_wsy9.png" mode="">
			</image> -->
      <image class="lingqu" src='@/static/go_pay.png' mode="">
      </image>
      <view class="swiper-main">
        <view class="title">福利倒计时:</view>
        <u-count-down :timestamp="timestamp" bg-color='none' color="#fff" font-size="24rpx" separator-color="#fff"
          separator-size="24rpx"></u-count-down>
      </view>
    </view>
    <view class="notice flex align-center">
      <view class="notice-left">
        <image src="/static/home/notice.png" mode=""></image>
      </view>
      <view class="label">通知</view>
      <view class="notice-list">
        <!-- 抖音微信 -->
        <!-- <u-notice-bar type='none' :volume-icon="false" padding="18rpx 0" mode="vertical" :list="noticeList"
					color="#666"></u-notice-bar> -->
        <!-- 快手 -->
        <l-noticBar :list="noticeList" :showNum="1" v-if="shownotice"></l-noticBar>
      </view>
    </view>
    <view class="banner" style="align-items:flex-start">
      <view class="banner-card banner-card-sign-up" style="width: 50%;" @click="handEn">
        <image class="bg" src="/static/banner-card1.png" style="width: 100%;height:300rpx" mode="aspectFill"></image>
        <view class="con">
          <view class="banner_title" style="font-size: 50rpx;">一键报名</view>
          <view class="title" style="font-size: 30rpx;margin-top: 10rpx;">绿色通道</view>
          <view class="title" style="font-size: 30rpx;margin-top: 20rpx">远程报名</view>
          <view class="flex">
            <view class="go_btn" style="color: #FE592D;height:60rpx;font-size: 40rpx;padding: 14rpx 20rpx;">
              去报名
            </view>
          </view>
        </view>
      </view>
      <view style="display: flex;flex-direction: column;width: 50%;">
        <view class="banner-card" @click="Go_skill">
          <image class="bg" src="/static/banner-card3.png" mode="aspectFill"></image>
          <view class="con">
            <view class="banner_title">考试技巧</view>
            <view class="title">全国技巧</view>
            <view class="title">区域技巧</view>
            <view class="flex" style="margin-top: -90rpx;margin-left: 140rpx;">
              <view class="go_btn" style="color: #06B97B;padding: 5rpx 20rpx;">
                去查看
              </view>
            </view>
          </view>

        </view>
        <view class="banner-card" @click="listen" style="margin-top: 10rpx;">
          <image class="bg" src="/static/banner-card2.png" mode="aspectFill"></image>
          <view class="con">
            <view class="banner_title">语音听题</view>
            <view class="title">随时随地</view>
            <view class="title">节省精力</view>
            <view class="flex" style="margin-top: -90rpx;margin-left: 140rpx;">
              <view class="go_btn">
                去听题
              </view>
            </view>
          </view>

        </view>
      </view>
    </view>
    <view style="text-align: center;margin-top: 160rpx;" v-if="isloding">
      <u-loading size="36"></u-loading>
    </view>
    <view v-if="!isloding">
      <view class="card" v-for="(item, index) in paperList.paper" :key="index">
        <view class="card-title flex align-center">
          <text>{{ item.paperName }}</text>
          <text>共 {{ item.questionCount }} 题</text>
        </view>
        <view class="grid flex align-center">
          <view class="grid-item" @click="handChange(0, item)">
            <image src="/static/home/icon1.png" mode=""></image>
            <text>顺序练习</text>
          </view>
          <view class="grid-item" @click="handChange(1, item)">
            <image src="/static/home/icon2.png" mode=""></image>
            <text>章节练习</text>
          </view>
          <view class="grid-item" @click="handChange(2, item)">
            <image src="/static/home/icon3.png" mode=""></image>
            <text>模拟考试</text>
          </view>
          <!-- <view class="grid-item" @click="handChange(3, item)">
						<image src="/static/home/icon4.png" mode=""></image>
						<text>语音听题</text>
					</view> -->
          <view class="grid-item" @click="handChange(4, item)">
            <image src="/static/home/icon5.png" mode=""></image>
            <text>错题·收藏</text>
          </view>
        </view>
      </view>
      <view class="card">
        <view class="card-title flex align-center">
          <text>技巧题库</text>
        </view>
        <view v-for="(item2, index) in paperList.skill" :key="item2.id_" class="cell flex align-center"
          @click="handSkill(index)">
          <image :src="item2.icon" mode=""></image>
          <view class="info">
            <view class="name">{{ item2.title_ }}</view>
            <view class="desc">{{ item2.sub_title }}</view>
          </view>
          <view class="icon">
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <!-- <view class="bottom">
				<image src="@/static/bottom.png" mode="widthFix"></image>
			</view> -->
    </view>
    <lock-pop ref="lock" />
  </view>
</template>

<script>
import {
  doPaper,
  doCountTime,
  doNotice,
  cityname,
  checkUserUnlock
} from '@/api/home.js'
// 腾讯地图
import qqmap from '@/utils/qqmap-wx-jssdk.js'
import {
  doPaperList
} from '@/api/skill.js'
import {
  mapGetters
} from 'vuex'
import lockPop from '@/pages/tabbar/home/components/lockPop.vue'
export default {
  components: {
    lockPop
  },
  data () {
    return {
      swiperList: [],
      noticeList: [],
      shownotice: false,
      paperList: [],
      skillList: [],
      // 城市
      location: '杭州',
      isloding: true,
    }
  },
  computed: {
    ...mapGetters('app', {
      token: 'token',
      userinfo: 'userinfo',
      timestamp: 'timestamp'
    })
  },
  onShareAppMessage (res) {
    return {
      title: '网约车从业考试 提供全国各地题库+技巧解析',
    }
  },
  onShareTimeline (res) {
    return {
      title: '网约车从业考试 提供全国各地题库+技巧解析',
    }
  },
  async onLoad (e) {
    if (e?.pid) {
      this.$store.dispatch('app/setPid', e.pid)
    }
    this.getPaper()
    this.getNotice()
    this.getlocation()
    this.$store.dispatch('app/setTime')
  },
  onShow () {
    if (this.token) {
      this.$store.dispatch('app/getUserInfo')
    }
    if (getApp().globalData.name != undefined) {
      this.location = getApp().globalData.name
      this.$store.commit('app/SETLOCATION', this.location)
      this.getPaper()
    }
  },
  methods: {
    Go_skill () {
      uni.navigateTo({
        url: 'components/Technical_elaboration?city=' + this.location
      })
    },
    listen () {
      if (!this.token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      let info = {
        city: this.location
      }
      this.getcheck(3, info)
    },
    //切换城市
    change_city () {
      uni.navigateTo({
        url: '/pages/tabbar/home/components/location'
      })
    },
    //获取经纬度
    getlocation () {
      const that = this
      uni.getLocation({
        type: 'wgs84',
        geocode: true, //设置该参数为true可直接获取经纬度及城市信息
        success: function (res) {
          let qqmapsdk = new qqmap({
            key: 'W2ZBZ-KSU3I-PIMGZ-UAIOO-MKABH-GHFJQ'
          });
          // 逆地址解析
          qqmapsdk.reverseGeocoder({
            location: {
              latitude: res
                .latitude,
              longitude: res
                .longitude
            },
            success: (res) => {
              console.log(res, '请求成功 ');

              that.getcityname(res.result.address_component.city)
              let data = {
                province: res.result.address_component.province,
                city: res.result.address_component.city
              }
              that.$store.commit('app/setmylocation', data)
            },
            fail: (e) => { }
          })
        },
        fail: function (e) {
          // this.$store.commit('app/SETLOCATION', '杭州')
          // setTimeout(() => {
          // 	console.log(this.$store.state.app)
          // }, 0)
          uni.showModal({
            content: '检测到您没打开获取定位权限，是否去设置打开？',
            confirmText: "确认",
            cancelText: '取消',
            success: (res) => {
              if (res.confirm) {
                uni.openSetting({
                  success: (res) => {
                    that.getlocation()
                  }
                })
              } else {
                uni.showToast({
                  title: '授权失败,可能无法正常使用小程序',
                  icon: 'none'
                })
                that.$store.commit('app/SETLOCATION', '杭州')
                that.location = '杭州'
                that.getPaper()
                return false;
              }
            }
          })
          return false;
          // uni.showToast({
          // 	title: '获取地址失败，将导致部分功能不可用',
          // 	icon: 'none'
          // });
        }
      });
    },
    async getNotice () {
      const {
        data
      } = await doNotice()
      for (let i in data) {
        this.noticeList.push(data[i].content)
      }
      this.shownotice = true
    },
    //获取城市简称
    async getcityname (name) {
      const {
        data
      } = await cityname({
        full_name: name
      })
      this.location = data
      // this.location = '绍兴'
      // this.$store.commit('SETLOCATION', this.location)
      this.$store.commit('app/SETLOCATION', this.location)
      this.getPaper()
    },
    //技巧是否解锁
    async getskilcheck (info) {
      const {
        data
      } = await checkUserUnlock({
        city: info.city_
      })
      let Unlock = data
      if (info.city_ == '0') {
        if (Unlock.national.is_unlock_skill == 0) {
          // uni.showToast({
          // 	title: '全国技巧题暂未解锁',
          // 	icon: 'none'
          // })
          // setTimeout(() => {
          // 	uni.navigateTo({
          // 		url: '/pages/paper/Set_meal?city=' + info.city_
          // 	})
          // }, 700)
          uni.navigateTo({
            url: '/pages/paper/Set_meal?city=' + info.city_
          })
          return
        }
      } else {
        if (Unlock.city.is_unlock_skill == 0) {
          // uni.showToast({
          // 	title: this.location + '技巧题暂未解锁',
          // 	icon: 'none'
          // })
          // setTimeout(() => {
          // 	uni.navigateTo({
          // 		url: '/pages/paper/Set_meal?city=' + info.city_
          // 	})
          // }, 700)
          uni.navigateTo({
            url: '/pages/paper/Set_meal?city=' + info.city_
          })
          return
        }
      }
      // if (this.userinfo.is_unlock === 0) {
      // 	this.$refs.lock.showEdit()
      // 	return
      // }
      uni.navigateTo({
        url: `/pages/skill/index?city=${info.city_}&id=${info.id_}`
      })
      // if (this.userinfo.is_unlock === 0) {
      // 	this.$refs.lock.showEdit()
      // 	return
      // }
      // this.paperList = data
    },
    handSkill (e) {
      if (!this.token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      this.getskilcheck(this.paperList.skill[e])
    },
    //获取题库
    async getPaper () {
      const {
        data
      } = await doPaper({
        city: this.location,
      })
      this.paperList = data
      this.isloding = false
    },
    //是否解锁
    async getcheck (e, info) {
      console.log(info.city)
      const {
        data
      } = await checkUserUnlock({
        city: info.city
      })
      let Unlock = data
      if (info.city == '0') {
        if (Unlock.national.is_unlock_question == 0) {
          uni.navigateTo({
            url: '/pages/paper/Set_meal?city=' + info.city
          })
          // uni.showToast({
          // 	title: '全国卷暂未解锁',
          // 	icon: 'none'
          // })
          // setTimeout(() => {
          // 	uni.navigateTo({
          // 		url: '/pages/paper/Set_meal?city=' + info.city
          // 	})
          // }, 700)
          return
        }
      } else {
        if (Unlock.city.is_unlock_question == 0) {
          // uni.showToast({
          // 	title: this.location + '卷暂未解锁',
          // 	icon: 'none'
          // })
          // setTimeout(() => {
          // 	uni.navigateTo({
          // 		url: '/pages/paper/Set_meal?city=' + info.city
          // 	})
          // }, 700)
          uni.navigateTo({
            url: '/pages/paper/Set_meal?city=' + info.city
          })
          return
        }
      }
      if (this.userinfo.is_unlock === 0) {
        this.$refs.lock.showEdit()
        return
      }
      const infos = {
        0: '/pages/paper/answer',
        1: '/pages/paper/chapter',
        2: '/pages/examination/star',
        3: '/pages/paper/hearing',
        4: '/pages/error/index'
      }
      if (infos[e]) {
        uni.navigateTo({
          url: `${infos[e]}?id=${info.id}&latestId=${info.latest_question_id || 0}&name=${info.city}`
        })
        return
      }
      // this.paperList = data
    },
    handChange (e, info) {
      if (!this.token) {
        uni.navigateTo({
          url: '/pages/login/login'
        })
        return
      }
      this.getcheck(e, info)

    },
    handApplica () {
      uni.navigateTo({
        url: '/pages/paper/application'
      })
    },
    handEn () {
      uni.navigateTo({
        url: '/pages/paper/enroll'
      })
    },
    swiperClick () {
      uni.navigateTo({
        url: '/pages/detail/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top_location {
  display: flex;
}

.location_title {
  font-size: 30rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.location_img {
  width: 44rpx;
  height: 44rpx;
  margin-left: 10rpx;
}

@keyframes scaleDraw {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.05);
  }

  50% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.05);
  }
}

.home {
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-top: 20rpx;
  padding-bottom: 80rpx;
  box-sizing: border-box;

  .swiper {
    width: 702rpx;
    margin: 0 auto;
    margin-top: 16rpx;
    position: relative;

    .bg {
      width: 702rpx;
      height: 272rpx;
      border-radius: 36rpx
    }

    .lingqu {
      width: 212rpx;
      height: 68rpx;
      position: absolute;
      left: 70rpx;
      bottom: 30rpx;
      animation-name: scaleDraw;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
      animation-duration: 1s;
    }

    &-main {
      position: absolute;
      top: 25rpx;
      right: 185rpx;
      height: 70rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #00BC71;
      padding: 0 20rpx;
      border-radius: 15rpx;

      .title {
        font-size: 20rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        padding-bottom: 2rpx;
      }
    }
  }

  .notice {
    width: 702rpx;
    height: 82rpx;
    margin: 24rpx auto 0 auto;
    background-color: #ffffff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 22rpx 24rpx;

    &-left {
      padding-right: 20rpx;
      // border-right: 1rpx solid #dddddd;
    }

    image {
      width: 40rpx;
      height: 40rpx;
    }

    .label {
      margin-left: 8rpx;
      font-size: 30rpx;
      font-family: DingTalk JinBuTi-Regular, DingTalk JinBuTi;
      font-weight: 400;
      color: #333333;
      padding-right: 20rpx;
      border-right: 1rpx solid #dddddd;
    }

    &-list {
      flex: 1 0 0;
      width: 0;
    }
  }

  .banner {
    width: 702rpx;
    margin: 24rpx 10rpx 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-bottom: 16rpx;


    .banner-card {
      width: 300rpx;
      height: 146rpx;
      position: relative;
      margin-left: 20rpx;

      .bg {
        width: 300rpx;
        height: 146rpx;
        border-radius: 16rpx;
      }

      .con {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0 20rpx;

        .banner_title {
          font-size: 30rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #FFFFFF;
          padding-top: 24rpx;
          padding-bottom: 8rpx;
        }

        .title {
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 40rpx;
        }

        .go_btn {
          margin-top: 18rpx;
          height: 38rpx;
          line-height: 38rpx;
          background: #EBFFF4;
          border-radius: 22rpx;
          padding: 2rpx 14rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #0683FF;
        }
      }
    }

    .banner-card-sign-up {
      width: 400rpx;
      margin-left: 0rpx;
    }
  }

  .card {
    width: 702rpx;
    margin: 24rpx auto 0 auto;
    background-color: #ffffff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 24rpx;

    &-title {
      font-size: 38rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;

      text {
        &:nth-child(2) {
          margin-left: 12rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #999999;
        }
      }
    }

    .grid {
      margin-top: 36rpx;

      &-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        image {
          width: 84rpx;
          height: 64.95rpx;
        }

        text {
          margin-top: 16rpx;
          font-size: 26rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: bold;
          color: #333333;
        }
      }
    }

    .cell {
      margin-top: 24rpx;
      padding: 32rpx 20rpx;
      background-color: #F6F7FF;
      border-radius: 16rpx;

      image {
        width: 74rpx;
        height: 74rpx;
      }

      .info {
        margin-left: 24rpx;
        flex: 1;

        .name {
          font-size: 38rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #333333;
        }

        .desc {
          margin-top: 10rpx;
          font-size: 30rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
        }
      }
    }
  }

  .bottom {
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 330rpx;
      height: auto;
    }
  }
}

.small_title {
  font-size: 24rpx;
  margin-left: 32rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  margin-top: 0rpx;
}
</style>